<template>
  <div class="app-container" style="">
    <div class="search-header">
      <el-form ref="whereform" :model="whereform" label-width="80px" class="form-block">
        <el-form-item label="订单号">
          <el-input v-model="whereform.ticket_id" style="display:block" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="whereform.user_phone" style="display:block" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-row style="padding:20px">
        <el-button type="primary" size="small" icon="el-icon-download" @click="daochu">订单导出</el-button>

      </el-row>
      <el-table
        :data="orderData"
        style="width: 100%"
      >
        <el-table-column
          label="订单号"
          width="220"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.ticket_id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="手机号"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.user_phone }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="线路号"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="车票数"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.total_num }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单金额(元)"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.total_price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="优惠(元)"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.deduction_price">{{ scope.row.deduction_price }}</span>
            <span v-else> -- </span>
          </template>
        </el-table-column>
        <el-table-column
          label="实付金额(元)"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.pay_price">{{ scope.row.pay_price }}</span>
            <span v-else> -- </span>
          </template>
        </el-table-column>
        <el-table-column
          label="已退金额(元)"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.refund_price">{{ scope.row.refund_price }}</span>
            <span v-else> -- </span>
          </template>
        </el-table-column>
        <el-table-column
          label="下单时间"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.pay_time">{{ scope.row.pay_time }}</span>
            <span v-else> -- </span>
          </template>
        </el-table-column>
        <el-table-column
          label="支付方式"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.pay_type">{{ scope.row.pay_type }}</span>
            <span v-else> -- </span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status">{{ scope.row.status }}</span>
            <span v-else> -- </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status=='已支付'"
              size="mini"
              type="danger"
              @click="handleRefund(scope.$index, scope.row)"
            >退款</el-button>
            <span v-else> -- </span>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding:10px;fl">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[20, 40, 80, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

  </div>
</template>

<script>
import { main_order_list, bus_main_oder_refund } from '@/api/ctm_bus'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {

      whereform: {
        page: 1,
        limit: 20,
        ticket_id: '',
        user_phone: ''
      },
      total: 0,
      pageSize: 0,
      list: null,
      listLoading: true,
      regularData: [],
      add_show: false,
      regularform: {
        line_id: '',
        pan_date: '',
        seat: '',
        remark: ''
      },
      orderData: [],
      currentPage4: 1

    }
  },
  created() {
    this.fetchData(this.whereform)
  },
  methods: {
    add_regular() {
      this.add_show = true
    },
    handelClose1() {
      this.add_show = false
    },
    handleEdit(index, row) {
      return this.$message.error('不可编辑')
      // this.$router.push({ name: 'addCtmLine', params: {
      //   id: row.id
      // }})
    },
    onSubmit() {
      this.fetchData(this.whereform)
    },
    fetchData(where) {
      this.listLoading = true
      main_order_list(where).then(res => {
        if (res.code !== 200) return this.$message.error(res.msg)
        this.orderData = res.data.data
        this.total = res.data.count
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.whereform.limit = val
      this.fetchData(this.whereform)
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.whereform.page = val
      this.fetchData(this.whereform)
      console.log(`当前页: ${val}`)
    },
    handleRefund(index, row) {
      bus_main_oder_refund({ ticket_id: row.ticket_id }).then(res => {
        if (res.code === 200) {
          this.fetchData()
          this.$message({ showClose: true, message: res.msg, type: 'success' })
        } else {
          this.$message({ showClose: true, message: res.msg, type: 'error' })
        }
      }).catch(error => { this.$message({ showClose: true, message: error, type: 'error' }) })
    },
    daochu() {
      this.$message({ showClose: true, message: '暂不可导出', type: 'error' })
    }
  }
}
</script>
<style scoped>
.app-container{
  background:#f0f2f5;
}
.search-header{
  background: #fff;
  padding: 10px 20px;
  margin: 10px 10px;
  display: flex;
}
.form-block {
  display:flex;
  padding: 10px 20px;
  margin: 10px 0;
}
.content{
  margin: 10px 10px;
   background: #fff;

}
</style>
